CSSã³ã³ããã¯ãšãªã®ç¡å¹åãšã¯ãšãªçµæãã£ãã·ã¥ã®ç¡å¹åã«ã€ããŠæãäžãããã©ãŠã¶ãCQã®å®è¡ãæé©åããæ¹æ³ãšãä¿¡é Œæ§ã®é«ãã¬ã¹ãã³ã·ããã¶ã€ã³ã®ããã«ç¡å¹åããã€çºçãããã解説ããŸãã
CSSã³ã³ããã¯ãšãªã®ç¡å¹åïŒã¯ãšãªçµæãã£ãã·ã¥ã®ç¡å¹åã«ã€ããŠ
CSSã³ã³ããã¯ãšãªïŒCQïŒã¯ãã¬ã¹ãã³ã·ãWebãã¶ã€ã³ã«ãããéèŠãªé²åãæå³ããã³ã³ããŒãã³ãããã¥ãŒããŒãã®ã¿ã«äŸåããã®ã§ã¯ãªããå å«èŠçŽ ã®ãµã€ãºã«åºã¥ããŠã¹ã¿ã€ã«ãé©å¿ãããããšãå¯èœã«ããŸããããã«ãããéçºè ã¯ããŸããŸãªã³ã³ããã¹ãã§äºæž¬ã©ããã«åäœãããããã¢ãžã¥ãŒã«åŒã§åå©çšå¯èœãªã³ã³ããŒãã³ããäœæã§ããŸãããã ããã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ã¯ãç¹ã«è€éãªã¬ã€ã¢ãŠãã§ã¯æžå¿µäºé ãšãªãå¯èœæ§ããããŸããããã軜æžããããã«ããã©ãŠã¶ã¯ã¯ãšãªçµæã®ãã£ãã·ã¥ãå«ãé«åºŠãªæé©åæè¡ãæ¡çšããŠããŸãããã®ãã£ãã·ã¥ãã©ã®ããã«æ©èœãããã€ç¡å¹ã«ãªãããçè§£ããããšã¯ãããã©ãŒãã³ã¹ãé«ãäºæž¬å¯èœãªCQé§åã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãã
ã³ã³ããã¯ãšãªãšã¯ïŒç°¡åãªãŸãšã
ç¡å¹åã«ã€ããŠæãäžããåã«ãã³ã³ããã¯ãšãªãäœã§ããããç°¡åã«ãŸãšããŸãããããã¥ãŒããŒããµã€ãºãã¿ãŒã²ãããšããã¡ãã£ã¢ã¯ãšãªãšã¯ç°ãªããã³ã³ããã¯ãšãªã¯ç¹å®ã®ç¥å èŠçŽ ïŒã³ã³ããïŒã®ãµã€ãºãŸãã¯ã¹ã¿ã€ã«ãã¿ãŒã²ãããšããŸããããã«ãããã³ã³ããŒãã³ãã¯ã°ããŒãã«ãªç»é¢ã®å¯žæ³ã§ã¯ãªããçŽæ¥çãªç°å¢ã«å¯Ÿå¿ã§ããŸãã
Webãµã€ãã®ããŸããŸãªã»ã¯ã·ã§ã³ã«è¡šç€ºãããã«ãŒãã³ã³ããŒãã³ããèããŠã¿ãŸããããã³ã³ããã¯ãšãªã䜿çšãããšãã«ãŒãã¯åã»ã¯ã·ã§ã³ã§äœ¿çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠã¬ã€ã¢ãŠããšã¹ã¿ã€ã«ãèªåçã«èª¿æŽããã©ãã«é 眮ãããŠãæé©ãªè¡šç€ºãä¿èšŒã§ããŸãã
ç°¡åãªäŸã次ã«ç€ºããŸãã
.container {
container-type: inline-size; /* Or size, or normal */
}
@container (min-width: 400px) {
.card {
/* Styles for larger containers */
flex-direction: row;
}
}
@container (max-width: 399px) {
.card {
/* Styles for smaller containers */
flex-direction: column;
}
}
ãã®äŸã§ã¯ã`.card`ã®flexæ¹åã¯ãå å«èŠçŽ ïŒ`.container`ïŒã®å¹ ã«åºã¥ããŠå€åããŸãã
ã¯ãšãªçµæã®ãã£ãã·ã¥ïŒã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ã®æé©å
ã³ã³ããã¯ãšãªã®è©äŸ¡ã¯ãç¹ã«ã¬ã€ã¢ãŠããè€éã§ãããã倿°ã®ã³ã³ããã¯ãšãªãå«ãŸããŠããå Žåãèšç®ã³ã¹ããé«ããªãå¯èœæ§ããããŸããåãã¯ãšãªãç¹°ãè¿ãè©äŸ¡ããããšãé¿ããããã«ããã©ãŠã¶ã¯ã¯ãšãªçµæã®ãã£ãã·ã¥ãå®è£ ããŸãããã®ãã£ãã·ã¥ã¯ãç¹å®ã®ã³ã³ãããšèŠçŽ ã®çµã¿åããã«å¯Ÿããåã³ã³ããã¯ãšãªè©äŸ¡ã®çµæïŒtrueãŸãã¯falseïŒãæ ŒçŽããŸãã
ã³ã³ããã¯ãšãªãè©äŸ¡ããå¿ èŠãããå Žåããã©ãŠã¶ã¯æåã«ãã£ãã·ã¥ã確èªããŸããæå¹ãªãšã³ããªãååšããå Žåããã£ãã·ã¥ãããçµæãçŽæ¥äœ¿çšãããã¯ãšãªãåè©äŸ¡ããå¿ èŠããªããªããŸããããã«ãããç¹ã«ã³ã³ãããµã€ãºãäžå®ã®ãŸãŸã§ãããã倿Žãå°ãªãå Žåã«ãããã©ãŒãã³ã¹ãå€§å¹ ã«åäžããŸãã
ã³ã³ããã¯ãšãªã®ãã£ãã·ã¥ã®å¹çã¯ããã£ãã·ã¥ã®ç²ŸåºŠã«äŸåããŸãããããã£ãŠããã©ãŠã¶ã¯ãã£ãã·ã¥ãæ éã«ç®¡çããå€ããªã£ããšãã«ãšã³ããªãç¡å¹ã«ããå¿ èŠããããŸãããã®ããã»ã¹ã¯ã³ã³ããã¯ãšãªã®ç¡å¹åãšåŒã°ããŸãã
ã³ã³ããã¯ãšãªã®ç¡å¹åã«ã€ããŠ
ã³ã³ããã¯ãšãªã®ç¡å¹åã¯ãã¯ãšãªã®çµæã«åœ±é¿ãäžããæ¡ä»¶ãå€åãããšãã«ãã¯ãšãªçµæãã£ãã·ã¥å ã®ãšã³ããªãåé€ãŸãã¯æŽæ°ããããã»ã¹ã§ããããã«ããããã©ãŠã¶ã¯ã³ã³ããã¯ãšãªã«åºã¥ããŠã¹ã¿ã€ã«ãé©çšãããšãã«ãåžžã«ææ°ã®æ å ±ã䜿çšããããšãä¿èšŒãããŸãã
ç¡å¹åã¯ãã³ã³ããã¯ãšãªã®ããã©ãŒãã³ã¹ã®éèŠãªåŽé¢ã§ããéå¹ççãªç¡å¹åã¯ãäžå¿ èŠãªåè©äŸ¡ãšããã©ãŒãã³ã¹ã®ããã«ããã¯ã«ã€ãªããå¯èœæ§ããããé床ã«ç©æ¥µçãªç¡å¹åã¯ãèŠèŠçãªççŸãšã¬ã€ã¢ãŠãã·ãããåŒãèµ·ããå¯èœæ§ããããŸãã
ç¡å¹åãããªã¬ãŒããäž»ãªèŠå
ããã€ãã®èŠå ãã³ã³ããã¯ãšãªã®ç¡å¹åãããªã¬ãŒããå¯èœæ§ããããŸãããããã®èŠå ãçè§£ããããšã¯ãã³ã³ããã¯ãšãªã®å®è£ ãæé©åããããã©ãŒãã³ã¹ã®åé¡ãåé¿ããããã«äžå¯æ¬ ã§ãã
- ã³ã³ãããµã€ãºã®å€æŽïŒæãæçœãªããªã¬ãŒã¯ãã³ã³ããèŠçŽ ã®ãµã€ãºã®å€æŽã§ããããã¯ã次ã®ãããªããŸããŸãªçç±ã§çºçããå¯èœæ§ããããŸãã
- ãŠã£ã³ããŠã®ãªãµã€ãºïŒãŠãŒã¶ãŒããã©ãŠã¶ãŠã£ã³ããŠã®ãµã€ãºã倿Žãããšãã³ã³ããã®ãµã€ãºã倿Žãããç¡å¹åãããªã¬ãŒãããå¯èœæ§ããããŸãã
- ã³ã³ãã³ãã®å€æŽïŒã³ã³ããå ã®ã³ã³ãã³ãã远å ãŸãã¯åé€ãããšããã®ãµã€ãºã«åœ±é¿ãäžããå¯èœæ§ããããŸããããšãã°ã段èœã«ããã¹ãã远å ãããšãã³ã³ããã®é«ããå¢å ããå¯èœæ§ããããŸãã
- åçãªã¬ã€ã¢ãŠãã®å€æŽïŒã³ã³ããã®ã¬ã€ã¢ãŠããŸãã¯å¯žæ³ã倿ŽããJavaScriptã³ãŒãã¯ãç¡å¹åãããªã¬ãŒããå¯èœæ§ããããŸããããã¯ãDOMãé »ç¹ã«æŽæ°ãããã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒã§äžè¬çã§ãã
- CSSããããã£ã®å€æŽïŒ`width`ã`height`ã`padding`ã`margin`ããŸãã¯`border`ãªã©ãã³ã³ããã®å¯žæ³ã«åœ±é¿ãäžããCSSããããã£ãžã®å€æŽããç¡å¹åãããªã¬ãŒããŸãã
- ã³ã³ããã¹ã¿ã€ã«ã®å€æŽïŒã³ã³ããã®ã¹ã¿ã€ã«ãžã®å€æŽã¯ãããšãããããµã€ãºã«çŽæ¥åœ±é¿ãäžããªããŠããã¯ãšãªããããã®ã¹ã¿ã€ã«ã«äŸåããŠããå Žåã¯ãç¡å¹åãããªã¬ãŒããå¯èœæ§ããããŸããäŸïŒ
- `font-size`ã®å€æŽïŒã³ã³ããã¯ãšãªã`em`åäœã䜿çšããŠããå Žåãã³ã³ããã®`font-size`ã®å€æŽã¯èšç®ããããµã€ãºã«åœ±é¿ãäžããç¡å¹åãããªã¬ãŒããŸãã
- `display`ããããã£ã®å€æŽïŒ`displayïŒnone`ãš`displayïŒblock`ã®åãæ¿ãã¯ãã³ã³ããã®ã¬ã€ã¢ãŠãã«åœ±é¿ãäžããç¡å¹åãããªã¬ãŒããå¯èœæ§ããããŸãã
- èŠçŽ å±æ§ã®å€æŽïŒã³ã³ããèŠçŽ ãŸãã¯ãã®åå«ã®å±æ§ãžã®å€æŽã¯ãç¹ã«CSSã»ã¬ã¯ã¿ãŒã§äœ¿çšããã屿§ãžã®å€æŽã¯ãç¡å¹åãããªã¬ãŒããå¯èœæ§ããããŸãã
- DOMã®å€æŽïŒã³ã³ããå ã®èŠçŽ ã®è¿œå ãåé€ããŸãã¯äžŠã¹æ¿ãã¯ãã¬ã€ã¢ãŠãã«åœ±é¿ãäžããç¡å¹åãããªã¬ãŒããå¯èœæ§ããããŸãã
- ãã©ã³ãã®ããŒãïŒã³ã³ããã®ãµã€ãºãããã¹ãã®ã¬ã³ããªã³ã°ããããµã€ãºã«äŸåããŠããå Žåããã©ã³ããå©çšå¯èœã«ãªããšããã©ã³ãã®ããŒãã«ãã£ãŠç¡å¹åãããªã¬ãŒãããå¯èœæ§ããããŸãã
- ã¹ã¯ããŒã«ã€ãã³ãïŒå Žåã«ãã£ãŠã¯ãã³ã³ããå ã®ã¹ã¯ããŒã«ã«ãã£ãŠç¡å¹åãããªã¬ãŒãããããšããããŸããç¹ã«ãã¬ã€ã¢ãŠããã¹ã¯ããŒã«äœçœ®ã«äŸåããŠããå Žåã
ç¡å¹åã·ããªãªã®äŸ
ã³ã³ããã¯ãšãªã®ç¡å¹åãããªã¬ãŒããå¯èœæ§ã®ããç¹å®ã®ã·ããªãªãããã€ãèŠãŠã¿ãŸãããã
- åçã³ã³ãã³ãã®ããŒãïŒèšäºãåçã«ããŒãããããã¥ãŒã¹Webãµã€ããæ³åããŠãã ãããæ°ããèšäºãã»ã¯ã·ã§ã³ã«è¿œå ããããšãã³ã³ããã®é«ããå¢å ãããã®ã»ã¯ã·ã§ã³å ã®èŠçŽ ã®ã³ã³ããã¯ãšãªã®ç¡å¹åãšåè©äŸ¡ãããªã¬ãŒãããå¯èœæ§ããããŸããããã¯ããã£ãŒããåžžã«æŽæ°ãããTwitterãFacebookãªã©ã®ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ã§éåžžã«äžè¬çã§ãã
- æãããã¿å¯èœãªã»ã¯ã·ã§ã³ïŒæãããã¿å¯èœãªã»ã¯ã·ã§ã³ãããFAQããŒãžãèããŠã¿ãŸããããã»ã¯ã·ã§ã³ãå±éãŸãã¯æãããããšãã³ã³ããã®é«ããå€ãããç¡å¹åãããªã¬ãŒãããä»ã®ã»ã¯ã·ã§ã³ã®ã¬ã€ã¢ãŠããããã«å¿ããŠèª¿æŽãããŸãã
- ç»åã®ããŒãïŒç»åãã³ã³ããå ã«ããŒãããããšãã³ã³ããã®ãµã€ãºã«åœ±é¿ãäžããç¡å¹åãããªã¬ãŒããåšå²ã®ããã¹ãããªãããŒããå¯èœæ§ããããŸãã
- ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã®ã€ã³ã¿ã©ã¯ã·ã§ã³ïŒã³ã³ããããèŠçŽ ã远å ãŸãã¯åé€ãããã¿ã³ãã¯ãªãã¯ããããããããããŠã³ã¡ãã¥ãŒã§éžæãããªãã·ã§ã³ã倿Žããããããšããã¹ãŠç¡å¹åãããªã¬ãŒãããå¯èœæ§ããããŸãã
- ã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ïŒã³ã³ããã®ãµã€ãºãŸãã¯ã¹ã¿ã€ã«ã倿Žããã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ã¯ãç¶ç¶çãªç¡å¹åãããªã¬ãŒããããã©ãŒãã³ã¹ã®åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã
ãã©ãŠã¶ã®ç¡å¹åæŠç¥ïŒããã©ãŒãã³ã¹ãšç²ŸåºŠã®ãã©ã³ã¹
ãã©ãŠã¶ã¯ãæ£ç¢ºãªçµæã®å¿ èŠæ§ãšæé©ãªããã©ãŒãã³ã¹ã®èŠæãšã®ãã©ã³ã¹ãåããªãããã³ã³ããã¯ãšãªã®ç¡å¹åãæé©åããããã«ããŸããŸãªæŠç¥ãæ¡çšããŠããŸãããããã®æŠç¥ã«ã¯éåžžãæ¬¡ã®ãã®ãå«ãŸããŸãã
- ãããŠã³ã¹ãšã¹ããããªã³ã°ïŒãã¹ãŠã®å€æŽã§ãã£ãã·ã¥ãããã«ç¡å¹ã«ããã®ã§ã¯ãªãããã©ãŠã¶ã¯ç¡å¹åããã»ã¹ããããŠã³ã¹ãŸãã¯ã¹ãããã«ããå ŽåããããŸããããã¯ãäžå®ã®æéãçµéããããäžå®åæ°ã®å€æŽãçºçãããŸã§ç¡å¹åãé ãããããšãæå³ããŸãã
- 詳现ãªç¡å¹åïŒãã©ãŠã¶ã¯ããã£ãã·ã¥å šäœãç¡å¹ã«ããã®ã§ã¯ãªãã倿Žã®åœ±é¿ãåããç¹å®ã®ãã£ãã·ã¥ãšã³ããªã®ã¿ãç¡å¹ã«ããå ŽåããããŸããããã«ãããå¿ èŠãªåè©äŸ¡ã®éãå€§å¹ ã«åæžã§ããŸãã
- éåæç¡å¹åïŒç¡å¹åã¯éåæã§å®è¡ãããå Žåãããããã©ãŠã¶ã¯ãã£ãã·ã¥ãæŽæ°ãããŠããéãããŒãžã®ã¬ã³ããªã³ã°ãç¶è¡ã§ããŸãã
ãã©ãŠã¶ã䜿çšããç¹å®ã®ç¡å¹åæŠç¥ã¯å®è£ ã«äŸåãããã©ãŠã¶ãããŒãžã§ã³ã«ãã£ãŠç°ãªãå ŽåããããŸãããã ããäžè¬çãªååã¯åããŸãŸã§ããçµæãæ£ç¢ºã§ããããšãä¿èšŒããªãããåè©äŸ¡ã®æ°ãæå°éã«æããŸãã
ããã©ãŒãã³ã¹ãžã®åœ±é¿ãšæœåšçãªåé¡
ã³ã³ããã¯ãšãªã®ç¡å¹åãé©åã«åŠçããªããšãããã€ãã®ããã©ãŒãã³ã¹ã®åé¡ãçºçããå¯èœæ§ããããŸãã
- ã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ïŒé床ã®ç¡å¹åã«ããããã©ãŠã¶ãã¬ã€ã¢ãŠããç¹°ãè¿ãåèšç®ããã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãšããã©ãŒãã³ã¹ã®äœäžã«ã€ãªããå¯èœæ§ããããŸããããã¯ã倿°ã®ã³ã³ããã¯ãšãªãããè€éãªã¬ã€ã¢ãŠãã§ç¹ã«é¡èã§ãã
- ã¬ã€ã¢ãŠãã·ããïŒäžè²«æ§ã®ãªãç¡å¹åã¯ãã¬ã€ã¢ãŠãã·ãããåŒãèµ·ããå¯èœæ§ããããŸãããã®å Žåãã³ã³ããã¯ãšãªãåè©äŸ¡ããããšãèŠçŽ ãçªç¶ç§»åããããµã€ãºã倿ŽããããããŸãããããã®ã·ããã¯ãäžå¿«ã§ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæãªãå¯èœæ§ããããŸãã
- CPU䜿çšçã®å¢å ïŒé »ç¹ãªåè©äŸ¡ã¯CPUãªãœãŒã¹ãæ¶è²»ããã¢ãã€ã«ããã€ã¹ã®ããããªãŒå¯¿åœã«åœ±é¿ãäžããããã·ã¹ãã å šäœã®ããã©ãŒãã³ã¹ãäœäžããããããå¯èœæ§ããããŸãã
ã³ã³ããã¯ãšãªã®ç¡å¹åãæé©åããããã®ãã¹ããã©ã¯ãã£ã¹
ã³ã³ããã¯ãšãªã®ç¡å¹åãããã©ãŒãã³ã¹ã«äžãã圱é¿ãæå°éã«æããã«ã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããã
- ã³ã³ãããµã€ãºã®å€æŽãæå°éã«æããïŒã³ã³ãããµã€ãºã®å€æŽã®é »åºŠãšå€§ãããæžãããŸããã³ã³ããã®å¯žæ³ã«åœ±é¿ãäžããäžèŠãªã¢ãã¡ãŒã·ã§ã³ãŸãã¯ãã©ã³ãžã·ã§ã³ã¯é¿ããŠãã ããã
- `contain-intrinsic-size`ã䜿çšããïŒã³ã³ããã®ã³ã³ãã³ããæåã¯äžæãªå ŽåïŒäŸïŒåçã«ããŒããããç»åïŒã`contain-intrinsic-size`ããããã£ã䜿çšããŠãã³ã³ããã®åæãµã€ãºãæå®ããŸããããã«ãããåæã¬ã€ã¢ãŠãã·ãããšäžèŠãªç¡å¹åãé²ãããšãã§ããŸãã
- DOMã®æŽæ°ãæé©åããïŒDOMã®æŽæ°ããããåŠçããç¡å¹åãããªã¬ãŒããå¯èœæ§ã®ããäžèŠãªæäœãé¿ããŠãã ããã`requestAnimationFrame`ãªã©ã®ææ³ã䜿çšããŠãDOMã®æŽæ°ãå¹ççã«ã¹ã±ãžã¥ãŒã«ããŸãã
- CSS Containmentã䜿çšããïŒ`contain`ããããã£ã䜿çšãããšãããã¥ã¡ã³ãããªãŒã®äžéšãåé¢ããã¬ã€ã¢ãŠããšã¬ã³ããªã³ã°ã®èšç®ã®ç¯å²ãå¶éã§ããŸããããã«ãããã³ã³ãããµã€ãºã®å€æŽãããŒãžã®ä»ã®éšåã«äžãã圱é¿ã軜æžã§ããŸãã`contain: layout`ã`contain: content`ããŸãã¯`contain: paint`ã詊ããŠãç¹å®ã®ã±ãŒã¹ã§ããã©ãŒãã³ã¹ãåäžãããã©ããã確èªããŠãã ããã
- JavaScripté§åã®å€æŽããããŠã³ã¹ããã³ã¹ãããã«ããïŒJavaScriptã䜿çšããŠã³ã³ããã®ãµã€ãºãŸãã¯ã¹ã¿ã€ã«ã倿Žããå Žåã¯ã倿ŽããããŠã³ã¹ãŸãã¯ã¹ãããã«ããŠãé床ã®ç¡å¹åãåé¿ããŸãã
- ããã©ãŒãã³ã¹ã®ãããã¡ã€ã«ãšç£èŠïŒãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠãã³ã³ããã¯ãšãªã®å®è£ ã®ããã©ãŒãã³ã¹ããããã¡ã€ã«ããã³ç£èŠããŸããç¡å¹åãããã©ãŒãã³ã¹ã®ããã«ããã¯ãåŒãèµ·ãããŠããé åãç¹å®ããããã«å¿ããŠæé©åããŸãã
- 代æ¿ãœãªã¥ãŒã·ã§ã³ãæ€èšããïŒå Žåã«ãã£ãŠã¯ãã³ã³ããã¯ãšãªãæãå¹ççãªãœãªã¥ãŒã·ã§ã³ã§ã¯ãªãå ŽåããããŸããJavaScriptã䜿çšããŠDOMãçŽæ¥æäœããããCSS倿°ã䜿çšããŠã¹ã¿ã€ãªã³ã°æ å ±ãäŒæããããããªã©ã代æ¿ã¢ãããŒããæ€èšããŠãã ãããããŸããŸãªã¢ãããŒãéã®ãã¬ãŒããªããæ éã«è©äŸ¡ããŸãã
- ã³ã³ããã¯ãšãªã®ç¯å²ãå¶éããïŒã³ã³ããã¯ãšãªãè³¢æã«äœ¿çšããŠãã ãããããŒãžã®ãã¹ãŠã®èŠçŽ ã«ã³ã³ããã¯ãšãªãé©çšããããšã¯é¿ããŠãã ãããã³ã³ããããŒã¹ã®ã¹ã¿ã€ãªã³ã°ãå¿ èŠãšããç¹å®ã®ã³ã³ããŒãã³ãã«çŠç¹ãåœãŠãŸãã
ã³ã³ããã¯ãšãªã®ç¡å¹åã®åé¡ã®ãããã°
ã³ã³ããã¯ãšãªã®ç¡å¹åã®åé¡ããããã°ããã®ã¯é£ããå ŽåããããŸããããã€ãã®ãã³ããæ¬¡ã«ç€ºããŸãã
- ãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããïŒãã©ãŠã¶ã®éçºè ããŒã«ã¯ãã¬ã€ã¢ãŠããšã¬ã³ããªã³ã°ã®ããã©ãŒãã³ã¹ã«é¢ãã貎éãªæŽå¯ãæäŸããŸããããã©ãŒãã³ã¹ããã«ã䜿çšããŠãã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãã¬ã€ã¢ãŠãã·ãããããã³ã³ã³ããã¯ãšãªã«é¢é£ãããã®ä»ã®ããã©ãŒãã³ã¹ã®åé¡ãç¹å®ããŸãã
- ç¡å¹åããªã¬ãŒãç¹å®ããïŒèŠçŽ ããã«ã䜿çšããŠãã³ã³ããèŠçŽ ãšãã®åå«ãæ€æ»ããŸããã³ã³ããã®ãµã€ãºãã¹ã¿ã€ã«ãããã³å±æ§ã®å€æŽãç£èŠããŸããç¡å¹åãããªã¬ãŒããŠããç¹å®ã®ã€ãã³ããç¹å®ããŸãã
- `console.log`ã¹ããŒãã¡ã³ãã䜿çšããïŒJavaScriptã³ãŒãã«`console.log`ã¹ããŒãã¡ã³ãã远å ããŠãã³ã³ããã¯ãšãªããã€åè©äŸ¡ãããŠãããã远跡ããŸããããã¯ãç¡å¹åããªã¬ãŒã®ãœãŒã¹ãç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã
- CSSãªã³ã¿ãŒã䜿çšããïŒCSSãªã³ã¿ãŒã¯ãCSSã³ãŒãã®æœåšçãªããã©ãŒãã³ã¹ã®åé¡ãç¹å®ããã®ã«åœ¹ç«ã¡ãŸããããšãã°ãé床ã«è€éãªã»ã¬ã¯ã¿ãŒãã³ã³ããã¯ãšãªã®éå¹çãªäœ¿çšãªã©ã§ãã
ã³ã³ããã¯ãšãªã®æé©åã«ãããå°æ¥ã®ãã¬ã³ã
ã³ã³ããã¯ãšãªã®æé©åæè¡ã®éçºã¯ç¶ç¶çãªããã»ã¹ã§ããå°æ¥ã®ãã¬ã³ãã«ã¯ã次ã®ãã®ãå«ãŸããå¯èœæ§ããããŸãã
- ããé«åºŠãªç¡å¹åã¢ã«ãŽãªãºã ïŒãã©ãŠã¶ã¯ãã¯ãšãªçµæãã£ãã·ã¥ãç¡å¹ã«ããããã®ããé«åºŠãªã¢ã«ãŽãªãºã ãéçºããäžå¿ èŠãªåè©äŸ¡ã®æ°ãããã«åæžããå¯èœæ§ããããŸãã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ïŒã³ã³ããã¯ãšãªã®è©äŸ¡ãGPUã«ãªãããŒãããŠãCPUãªãœãŒã¹ãéãããŠããããã€ã¹ã§ã®ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- æ¹åãããéçºè ããŒã«ïŒãã©ãŠã¶ã®éçºè ããŒã«ã¯ãã³ã³ããã¯ãšãªã®ç¡å¹åã«é¢ããããè©³çŽ°ãªæ å ±ãæäŸããå¯èœæ§ããããŸããããã«ãããããã©ãŒãã³ã¹ã®åé¡ãç¹å®ããŠãããã°ããã®ãç°¡åã«ãªããŸãã
çµè«
ã³ã³ããã¯ãšãªã®ç¡å¹åãçè§£ããããšã¯ãããã©ãŒãã³ã¹ãé«ãäºæž¬å¯èœãªCQé§åã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãããã®èšäºã§æŠèª¬ãããŠãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãç¡å¹åãããã©ãŒãã³ã¹ã«äžãã圱é¿ãæå°éã«æããç°å¢ã«ã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã¹ãã³ã·ãã³ã³ããŒãã³ããäœæã§ããŸããæœåšçãªããã«ããã¯ãç¹å®ããããã«å¿ããŠæé©åããããã«ãã³ã³ããã¯ãšãªã®å®è£ ããããã¡ã€ã«ããã³ç£èŠããããšãå¿ããªãã§ãã ãããã³ã³ããã¯ãšãªãããåºãæ¡çšãããã«ã€ããŠããã©ãŠã¶ã®æé©åæè¡ã®ç¶ç¶çãªé²æ©ã«ãããããã©ãŒãã³ã¹ãšäœ¿ãããããããã«åäžããŸãã
ã³ã³ããã¯ãšãªã®åã責任ãæã£ãп޻çšããã¬ã¹ãã³ã·ãWebãã¶ã€ã³ã¯ãŒã¯ãããŒã§æ°ããªã¬ãã«ã®æè»æ§ãšå¶åŸ¡ãå®çŸããŠãã ãããã¯ãšãªçµæãã£ãã·ã¥ã®ç¡å¹åã®è€éããçè§£ããããšã§ãããã€ã¹ãã³ã³ããã¹ãã«é¢ä¿ãªãããã¹ãŠã®äººã«ã¹ã ãŒãºã§ããã©ãŒãã³ã¹ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒã§ããŸãã